import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import "../component" as C

Item {
    id: rootMainPage
    property var goToPage
    Loader {
        id: autoPage
        source: "qrc:/pages/AutoPage.qml"
    }

    Loader {
        id: stopPage
        source: "qrc:/pages/StopPage.qml"
    }

    FontLoader {
        id: iconFont
        source: "qrc:/assets/fontawesome-free-6.7.2-desktop/otfs/Font Awesome 6 Free-Solid-900.otf"
    }

    Theme { id: theme }


    // 控制模式：auto / manual
    property string controlMode: "manual"
    property string returnValue: "";
    property string selectedCardId: ""
    // signal buttonClicked()

    function hideMask(ok){
        returnValue = ok
        if (returnValue === "cancel"){
            controlMode = (controlMode === "manual" ? "auto":"manual");
//            console.log("ok" , ok);
            //modeChanged(controlMode);
        }
    }

    onControlModeChanged: {
        console.log("controlMode:",controlMode, " returnValue", returnValue);
        if (controlMode === "auto" && returnValue !=="cancel"){
            autoPage.item.visible = true;
        }

        if (controlMode === "manual"&& returnValue !=="cancel"){
            stopPage.item.visible = true;
        }

        returnValue="ok";
        console.log(" returnValue", returnValue);
    }

    // 顶部
    Item {
        id: modeSwitch
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 20
        width: 420
        height: 60

        // 背景轨道
        Rectangle {
            id: switchTrack
            anchors.fill: parent
            radius: 30
            color: "transparent"

            layer.enabled: true
            layer.effect: MultiEffect {
                shadowEnabled: true
                shadowColor: theme.shadowColor
                shadowBlur: theme.shadowBlur
                shadowHorizontalOffset: theme.shadowXOffset
                shadowVerticalOffset: theme.shadowYOffset
            }

            Canvas {
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    var grad = ctx.createLinearGradient(0, 0, width, height);
                    grad.addColorStop(0, "#EBF2FB");
                    grad.addColorStop(1, "#D8EBFB");
                    ctx.fillStyle = grad;

                    var r = switchTrack.radius || 0;
                    var w = width;
                    var h = height;
                    ctx.beginPath();
                    ctx.moveTo(r, 0);
                    ctx.lineTo(w - r, 0);
                    ctx.quadraticCurveTo(w, 0, w, r);
                    ctx.lineTo(w, h - r);
                    ctx.quadraticCurveTo(w, h, w - r, h);
                    ctx.lineTo(r, h);
                    ctx.quadraticCurveTo(0, h, 0, h - r);
                    ctx.lineTo(0, r);
                    ctx.quadraticCurveTo(0, 0, r, 0);
                    ctx.closePath();
                    ctx.fill();
                }
            }

            // 滑块
            Rectangle {
                id: slider
                width: parent.width * 0.56
                height: parent.height
                radius: 30
                color: "#FFFFFF"
                anchors.verticalCenter: parent.verticalCenter

                states: [
                    State {
                        name: "auto"
                        when: controlMode === "auto"
                        AnchorChanges {
                            target: slider
                            anchors.left: switchTrack.left
                            anchors.right: undefined
                        }
                    },
                    State {
                        name: "manual"
                        when: controlMode === "manual"
                        AnchorChanges {
                            target: slider
                            anchors.left: undefined
                            anchors.right: switchTrack.right
                        }
                    }
                ]

                transitions: [
                    Transition {
                        AnchorAnimation {
                            duration: 300
                            easing.type: Easing.OutCubic
                        }
                    }
                ]

                layer.enabled: true
                layer.effect: MultiEffect {
                    shadowEnabled: true
                    shadowColor: theme.shadowColor
                    shadowBlur: theme.shadowBlur
                    shadowHorizontalOffset: theme.shadowXOffset
                    shadowVerticalOffset: theme.shadowYOffset
                }
            }

            // 左
            Text {
                anchors.left: parent.left
                anchors.leftMargin: parent.width * 0.18
                anchors.verticalCenter: parent.verticalCenter
                text: "一键自动"
                font.pixelSize: 24
                color: controlMode === "auto" ? theme.focusColor : "#A7B3C3"
                z: 2
            }

            // 右
            Text {
                anchors.right: parent.right
                anchors.rightMargin: parent.width * 0.18
                anchors.verticalCenter: parent.verticalCenter
                text: "手动控制"
                font.pixelSize: 24
                color: controlMode === "manual" ? theme.focusColor : "#A7B3C3"
                z: 2
            }

            // 左点击区域
            MouseArea {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: parent.width / 2
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    controlMode = "auto";
                    // buttonClicked();
                }
            }

            // 右点击区域
            MouseArea {
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: parent.width / 2
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    controlMode = "manual";
                    // buttonClicked();
                }
            }
        }
    }

    Image {
        id: printBtn
        width: 60
        height: 60
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.margins: 20
        fillMode: Image.PreserveAspectFit
        source: "qrc:/assets/mainpage/icon_print_b.png"
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onClicked: console.log("[MainPage] 点击打印按钮")
        }
    }

    Image {
        source: "qrc:/assets/product.png"
        width: 1200
        height: 900
        fillMode: Image.PreserveAspectFit
        anchors.centerIn: parent
        anchors.verticalCenterOffset: 80
    }

    Row {
        anchors.centerIn: parent
        anchors.verticalCenterOffset: 60
        spacing: 700

        Column {
            spacing: 30

            Card {
                id: rpmCard
                property bool holdActive: false
                padding: 40
                width: 450
                height: 250
                backgroundImageEnabled: true
                backgroundImageSource: holdActive ? "qrc:/assets/slices/bg_card_active@2x.png" : "qrc:/assets/slices/bg_card.png"

                overlay: [
                    MouseArea {
                        anchors.fill: parent
                        pressAndHoldInterval: 600
                        onPressAndHold: rpmCard.holdActive = true
                        onReleased: rpmCard.holdActive = false
                        onClicked: { if (goToPage) goToPage("stir") }
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onEntered: rpmCard.holdActive = true
                        onExited: rpmCard.holdActive = false
                    }
                ]

                Column {
                    spacing: 30
                    width: parent.width

                    Item {
                        width: parent.width
                        height: Math.max(rpmText.implicitHeight, rpmUnitText.implicitHeight)
                        Text {
                            id: rpmText
                            text: collectionInfo.speed
                            font.pixelSize: 56
                            font.bold: true
                            color: "#333333"
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Text {
                            id: rpmUnitText
                            text: "rpm"
                            font.pixelSize: 36
                            color: "#666666"
                            verticalAlignment: Text.AlignVCenter
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }

                    Item {
                        width: parent.width
                        height: 54
                        Image {
                            width: 54
                            height: 54
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: "qrc:/assets/mainpage/icon_stir_b.png"
                        }
                        Text {
                            text: "搅拌"
                            color: "#333333"
                            font.pixelSize: 36
                            anchors.left: parent.left
                            anchors.leftMargin: 54 + 12
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Image {
                            width: 48
                            height: 48
                            anchors.right: parent.right
                            anchors.rightMargin: - 10
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: {
                                var val = parseFloat(rpmText.text);
                                var status = collectionInfo.speedColor === 0 ? "red" : collectionInfo.speedColor === 1 ? "orange" : "green";
                                return "qrc:/assets/mainpage/" + status + ".png";
                            }
                        }
                    }
                }
            }

            Card {
                id: condCard
                property bool holdActive: false
                padding: 40
                width: 450
                height: 250
                backgroundImageEnabled: true
                backgroundImageSource: holdActive ? "qrc:/assets/slices/bg_card_active@2x.png" : "qrc:/assets/slices/bg_card.png"

                overlay: [
                    MouseArea {
                        anchors.fill: parent
                        pressAndHoldInterval: 600
                        onPressAndHold: condCard.holdActive = true
                        onReleased: condCard.holdActive = false
                        onClicked: { if (goToPage) goToPage("conductivity") }
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onEntered: condCard.holdActive = true
                        onExited: condCard.holdActive = false
                    }
                ]

                Column {
                    spacing: 30
                    width: parent.width

                    Item {
                        width: parent.width
                        height: Math.max(eText.implicitHeight, eUnitText.implicitHeight)
                        Text {
                            id: eText
                            text: collectionInfo.conductivity
                            font.pixelSize: 56
                            font.bold: true
                            color: "#333333"
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Text {
                            id: eUnitText
                            text: "μS/cm"
                            font.pixelSize: 36
                            color: "#666666"
                            verticalAlignment: Text.AlignVCenter
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }

                    Item {
                        width: parent.width
                        height: 54
                        Image {
                            width: 54
                            height: 54
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: "qrc:/assets/mainpage/icon_conductivity_b.png"
                        }
                        Text {
                            text: "电导"
                            color: "#333333"
                            font.pixelSize: 36
                            anchors.left: parent.left
                            anchors.leftMargin: 54 + 12
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Image {
                            width: 48
                            height: 48
                            anchors.right: parent.right
                            anchors.rightMargin: - 10
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: {
                                var val = parseFloat(eText.text);
                                var status = collectionInfo.conductivityColor === 0 ? "red" : collectionInfo.conductivityColor === 1 ? "orange" : "green";
                                return "qrc:/assets/mainpage/" + status + ".png";
                            }
                        }
                    }

                    
                }
            }

            Card {
                id: tempCard
                property bool holdActive: false
                padding: 40
                width: 450
                height: 250
                backgroundImageEnabled: true
                backgroundImageSource: holdActive ? "qrc:/assets/slices/bg_card_active@2x.png" : "qrc:/assets/slices/bg_card.png"

                overlay: [
                    MouseArea {
                        anchors.fill: parent
                        pressAndHoldInterval: 600
                        onPressAndHold: tempCard.holdActive = true
                        onReleased: tempCard.holdActive = false
                        onClicked: { if (goToPage) goToPage("temp") }
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onEntered: tempCard.holdActive = true
                        onExited: tempCard.holdActive = false
                    }
                ]

                Column {
                    spacing: 30
                    width: parent.width

                    Item {
                        width: parent.width
                        height: Math.max(temText.implicitHeight, temUnitText.implicitHeight)
                        Text {
                            id: temText
                            text: collectionInfo.temperature
                            font.pixelSize: 56
                            font.bold: true
                            color: "#333333"
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Text {
                            id: temUnitText
                            text: "°C"
                            font.pixelSize: 36
                            color: "#666666"
                            verticalAlignment: Text.AlignVCenter
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }

                    Item {
                        width: parent.width
                        height: 54
                        Image {
                            width: 54
                            height: 54
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: "qrc:/assets/mainpage/icon_temperature_b.png"
                        }
                        Text {
                            text: "温度"
                            color: "#333333"
                            font.pixelSize: 36
                            anchors.left: parent.left
                            anchors.leftMargin: 54 + 12
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Image {
                            width: 48
                            height: 48
                            anchors.right: parent.right
                            anchors.rightMargin: - 10
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: {
                                var val = parseFloat(temText.text);
                                var status = collectionInfo.temperatureColor === 0 ? "red" : collectionInfo.temperatureColor === 1 ? "orange" : "green";
                                return "qrc:/assets/mainpage/" + status + ".png";
                            }
                        }
                    }

                    
                }
            }
        }

        Column {
            spacing: 30

            Card {
                id: kgCard
                property bool holdActive: false
                padding: 40
                width: 450
                height: 250
                backgroundImageEnabled: true
                backgroundImageSource: holdActive ? "qrc:/assets/slices/bg_card_active@2x.png" : "qrc:/assets/slices/bg_card.png"

                overlay: [
                    MouseArea {
                        anchors.fill: parent
                        pressAndHoldInterval: 600
                        onPressAndHold: kgCard.holdActive = true
                        onReleased: kgCard.holdActive = false
                        onClicked: { if (goToPage) goToPage("weigh") }
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onEntered: kgCard.holdActive = true
                        onExited: kgCard.holdActive = false
                    }
                ]

                Column {
                    spacing: 30
                    width: parent.width

                    Item {
                        width: parent.width
                        height: Math.max(kgText.implicitHeight, kgUnitText.implicitHeight)
                        Text {
                            id: kgText
                            text: collectionInfo.weight
                            font.pixelSize: 56
                            font.bold: true
                            color: "#333333"
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Text {
                            id: kgUnitText
                            text: "g"
                            font.pixelSize: 36
                            color: "#666666"
                            verticalAlignment: Text.AlignVCenter
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }

                    Item {
                        width: parent.width
                        height: 54
                        Image {
                            width: 54
                            height: 54
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: "qrc:/assets/mainpage/icon_weight_b.png"
                        }
                        Text {
                            text: "称重"
                            color: "#333333"
                            font.pixelSize: 36
                            anchors.left: parent.left
                            anchors.leftMargin: 54 + 12
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Image {
                            width: 48
                            height: 48
                            anchors.right: parent.right
                            anchors.rightMargin: - 10
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: {
                                var val = parseFloat(kgText.text);
                                var status = collectionInfo.weightColor === 0 ? "red" : collectionInfo.weightColor === 1 ? "orange" : "green";
                                return "qrc:/assets/mainpage/" + status + ".png";
                            }
                        }
                    }

                }
            }

            Card {
                id: phCard
                property bool holdActive: false
                padding: 40
                width: 450
                height: 250
                backgroundImageEnabled: true
                backgroundImageSource: holdActive ? "qrc:/assets/slices/bg_card_active@2x.png" : "qrc:/assets/slices/bg_card.png"

                overlay: [
                    MouseArea {
                        anchors.fill: parent
                        pressAndHoldInterval: 600
                        onPressAndHold: phCard.holdActive = true
                        onReleased: phCard.holdActive = false
                        onClicked: { if (goToPage) goToPage("ph") }
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onEntered: phCard.holdActive = true
                        onExited: phCard.holdActive = false
                    }
                ]

                Column {
                    spacing: 30
                    width: parent.width

                    Item {
                        width: parent.width
                        height: Math.max(phText.implicitHeight, phUnitText.implicitHeight)
                        Text {
                            id: phText
                            text: collectionInfo.ph
                            font.pixelSize: 56
                            font.bold: true
                            color: "#333333"
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Text {
                            id: phUnitText
                            text: "pH"
                            font.pixelSize: 36
                            color: "#666666"
                            verticalAlignment: Text.AlignVCenter
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }

                    Item {
                        width: parent.width
                        height: 54
                        Image {
                            width: 54
                            height: 54
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: "qrc:/assets/mainpage/icon_ph_b.png"
                        }
                        Text {
                            text: "pH"
                            color: "#333333"
                            font.pixelSize: 36
                            anchors.left: parent.left
                            anchors.leftMargin: 54 + 12
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Image {
                            width: 48
                            height: 48
                            anchors.right: parent.right
                            anchors.rightMargin: - 10
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: {
                                var val = parseFloat(phText.text);
                                var status = collectionInfo.phColor === 0 ? "red" : collectionInfo.phColor === 1 ? "orange" : "green";
                                return "qrc:/assets/mainpage/" + status + ".png";
                            }
                        }
                    }

                    
                }
            }
        }
    }
}
